<template>
  <el-dropdown
    trigger="click"
    class="international"
    @command="handleSetLanguage"
  >
    <div>
      <el-tooltip content="国际化" :effect="effect">
        <svg-icon id="guide-lang" icon="language" />
      </el-tooltip>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item :disabled="language === 'zh'" command="zh">
          中文
        </el-dropdown-item>
        <el-dropdown-item :disabled="language === 'en'" command="en">
          English
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
  import { useI18n } from 'vue-i18n'
  import { defineProps, computed } from 'vue'
  import { useStore } from 'vuex'
  import { ElMessage } from 'element-plus'

  defineProps({
    effect: {
      type: String,
      default: 'dark',
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['dark', 'light'].indexOf(value) !== -1
      },
    },
  })

  const store = useStore()
  const language = computed(() => store.getters.language)

  // 切换语言的方法
  const i18n = useI18n()
  const handleSetLanguage = (lang) => {
    i18n.locale.value = lang
    store.commit('app/setLanguage', lang)
    ElMessage.success(i18n.t('msg.toast.switchLangSuccess'))
  }
</script>
